<template>
    <div class="app-container">
      <!--  <div class="filter-container">
            <el-input v-model="params.username"   placeholder="用户" style="width: 200px;" class="filter-item" @keyup.enter.native="fetchData" clearable/>
            <el-input v-model="params.requestIp"   placeholder="IP" style="width: 200px;margin-left: 10px;" class="filter-item" @keyup.enter.native="fetchData" clearable/>
            <el-button v-waves class="filter-item"   type="primary" icon="el-icon-search" @click="fetchData" style="margin-left: 10px;">
                搜索
            </el-button>
            <el-button @click="resetForm()" type="success" icon="el-icon-warning-outline" class="filter-item">重置</el-button>
        </div>-->

        <el-table
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                fit
                highlight-current-row
        >
            <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="请求方法" style="width: 100%">
                        <span>{{ props.row.method }}</span>
                    </el-form-item>
                    <el-form-item label="请求参数">
                        <span>{{ props.row.params }}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>
            <el-table-column label="用户名">
                <template slot-scope="scope">
                    {{ scope.row.username }}
                </template>
            </el-table-column>
            <el-table-column label="IP" align="center">
                <template slot-scope="scope">
                    {{ scope.row.requestIp }}
                </template>
            </el-table-column>
          <!--  <el-table-column label="IP来源" align="center">
                <template slot-scope="scope">
                {{scope.row.address}}
                </template>
            </el-table-column>-->
    <!--        <el-table-column label="描述" align="center">
                <template slot-scope="scope">
                    {{ scope.row.description }}
                </template>
            </el-table-column>-->
            <el-table-column label="浏览器" align="center">
                <template slot-scope="scope">
                    {{ scope.row.browser }}
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status==1">已处理</span>
                    <span v-else style="color: red">未处理</span>
                </template>
            </el-table-column>

            <el-table-column label="创建日期" align="center">
                <template slot-scope="scope">
                    {{ scope.row.createTime }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="操作">
                <template slot-scope="scope">
                    <el-row>
                        <el-button type="text" @click="showErrorDetails(scope.row)">查看详情</el-button>
                        <el-button type="text" v-if="scope.row.status == 0" @click="changeError(scope.row)">处理</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="params.page" :limit.sync="params.pageSize" @pagination="fetchData" />

        <el-dialog title="异常详情" :visible.sync="dialogFormVisible">

                <pre v-highlightjs="errorData" class="errorForm"><code class="java" /></pre>
            <div slot="footer" class="dialog-footer">
              <!--  <el-button @click="dialogFormVisible = false">
                    取消
                </el-button>-->
                <el-button type="primary" @click="dialogFormVisible = false">
                    关闭
                </el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import { get, put } from '@/utils/request'
    import Pagination from '@/components/Pagination'
    import waves from '@/directive/waves'

    export default {
        components: { Pagination },
        directives: { waves },
        data() {
            return {
                list: null,
                listLoading: true,
                total: 10,
                params: {
                    page: 1,
                    pageSize: 10,
                },
                dialogFormVisible:false,
                errorData:{},
            }
        },
        created() {
            this.fetchData();
        },
        methods: {
            fetchData() {
                this.listLoading = true
                get("/sysUser/errList.json",this.params).then(response => {
                    this.total=response.total
                    response.rows.forEach((item)=>{
                        if ((typeof item.status) == 'number'){
                            item.status = JSON.stringify(item.status)
                        }
                        console.log(typeof item.status);
                    })
                    this.list = response.rows
                    this.listLoading = false
                })
            },
            showErrorDetails(row){
                console.log(row);
                this.dialogFormVisible = true;

                get("/sysUser/errDetail.json",{id:row.id}).then(response => {
                    console.log(response);
                    this.errorData = response ;
                })
            },
            deleteError(id){

            },
            changeError(data){

                    put('/sysUser/dealError',{id:data.id}).then(res => {
                        this.$message({
                            type: 'success',
                            message: '处理成功!'
                        })
                        this.fetchData();
                    }).catch(err => {
                    })
            },
            resetForm(){
                this.params={
                    page:1,
                    pageSize:10
                }
                this.$nextTick(()=>{
                    this.fetchData();
                })
            }
        }
    }
</script>
<style scoped>
    /deep/.el-dialog {
        width: 70% !important;
    }
    .erContent{
        font-size: 14px;
        line-height: 25px;
    }
    /deep/ .el-dialog__body {
        padding: 0 20px 10px 20px !important;
    }
    .java.hljs {
        color: #444;
        background: #ffffff !important;
        height: 630px !important;
    }
</style>
